<template>
  <div class="property">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>房源管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 切换页面table -->
    <div class="tab">
      <li @click="onSale">销售楼盘</li>
      <li @click="onRend">房屋租赁</li>
    </div>
    <!-- 主体 -->
    <div class="main">
      <Sale v-if="show"></Sale>
      <Rend v-else-if="flag"></Rend>
    </div>
  </div>
</template>

<script>
import Sale from "../../components/Sale.vue";
import Rend from "../../components/Rend.vue";
export default {
  components: {
    Sale,
    Rend,
  },
  data() {
    return {
      tabInner: ["销售楼盘", "房屋租赁"],
      show: true,
      flag:false
    }
  },
  methods: {
    onSale() {
      this.show = !this.show
    },
    onRend() {
      this.flag = !this.flag
    }
  }
}
</script>

<style lang='scss'>
.property{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .tab{
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        li{
            border: 1px solid #ccc;
            height: 30px;
            line-height: 30px;
            padding: 0 5px;
        }
    }
    .main{
        flex: 1;
        overflow-y: scroll;
    }
}
</style>